<template>
  <div class="page_root" :key="queryUpdateFlag" data-page-name="FAQ" data-page-identification="w_0t99ah6jy8">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_jk7ozw00gq 自定义模板_r3pn8c4vso -->
      <!--           问题归类维护-->
      <a-modal
        centered
        :visible="state.classifyVisible"
        title="问题归类维护"
        width="800px"
        @ok="confirmClassFy"
        @cancel="cancalClassFy"
        :body-style="{ padding: '16px', height: '600px', overflowY: 'auto' }"
        :ok-button-props="{ loading: state.pzLoading }"
        destroy-on-close
        :maskClosable="false"
      >
        <div>
          <a-form :model="state.questionList" ref="createRef">
            <div class="module-item" v-for="(item, index) in state.questionList" :key="index">
              <div class="form-content">
                <a-row>
                  <a-col :span="12">
                    <a-form-item
                      label="问题归类标题"
                      :rules="[
                                                { required: true, message: '请输入问题归类标题！', trigger: 'blur' }
                                            ]"
                      :name="[index, 'problemClassifyName']"
                    >
                      <a-input style="width: 100%" v-model:value="state.questionList[index].problemClassifyName" />
                    </a-form-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-item
                      label="问题归类序号"
                      :rules="[
                                                { required: true, message: '请输入问题归类序号！', trigger: 'blur' }
                                            ]"
                      :name="[index, 'problemClassifyNo']"
                    >
                      <a-input-number style="width: 100%" v-model:value="state.questionList[index].problemClassifyNo" />
                    </a-form-item>
                  </a-col>
                </a-row>
              </div>

              <a class="del" @click="handlerDeleteFormItem1(index)">删除</a>
              <a class="add-btn" @click="handlerAddFormItem1(index, '下方')">下方插入</a>
            </div>
          </a-form>
          <a-space>
            <a-button type="primary" ghost @click="handlerAddFormItem1(index, '最后')"
              ><template #icon><plus-outlined /></template>新增</a-button
            >
          </a-space>
        </div>
      </a-modal>
      <!--           问题归类维护-->
      <!--           新增-->
      <a-modal
        centered
        :visible="state.createVisible"
        :title="state.createTitle"
        width="800px"
        @ok="confirmQuestion"
        @cancel="cancalQuestion"
        :body-style="{ padding: '16px', height: '600px', overflowY: 'auto' }"
        :ok-button-props="{ loading: state.pzLoading }"
        destroy-on-close
        :maskClosable="false"
      >
        <div class="my-page">
          <a-form :model="state.createList" ref="questionRef">
            <div class="form-top">
              <a-form-item label="问题归类" :rules="[{ required: false, message: '请选择问题归类' }]" name="problemClassifyId">
                <a-select
                  :options="twoState.classFyList"
                  v-model:value="state.createList.problemClassifyId"
                  :field-names="{ label: 'label', value: 'value' }"
                  :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                />
              </a-form-item>
              <a-form-item label="出现问题" :rules="[{ required: false, message: '请输入出现问题' }]" name="problemHappensName">
                <a-textarea v-model:value="state.createList.problemHappensName" placeholder="请输入出现问题" />
              </a-form-item>
              <a-form-item label="项目阶段" :rules="[{ required: false, message: '请输入项目阶段' }]" name="problemHappensStageList">
                <!--a-textarea
                                    v-model:value="state.createList.problemHappensStage"
                                    placeholder="请输入项目阶段"
                                /-->
                <a-select :options="taskList" mode="multiple" :field-names="{ label: 'label', value: 'value' }" v-model:value="state.createList.problemHappensStageList" />
              </a-form-item>
            </div>
            <div
              class="bottom-item"
              v-if="
                                state.createList.faqDeliveryFlowFormList &&
                                state.createList.faqDeliveryFlowFormList.length > 0
                            "
            >
              <div class="module-item-two" v-for="(item, index) in state.createList.faqDeliveryFlowFormList" :key="index">
                <div class="form-content">
                  <a-row>
                    <a-col :span="24">
                      <a-form-item
                        label="生产流程标签"
                        :rules="[
                                                    {
                                                        required: false,
                                                        message: '请选择生产流程标签！',
                                                        trigger: 'blur'
                                                    }
                                                ]"
                        :name="['faqDeliveryFlowFormList', index, 'flowLabel']"
                      >
                        <a-select
                          v-model:value="
                                                        state.createList.faqDeliveryFlowFormList[index].flowLabel
                                                    "
                          :options="[
                                                        {
                                                            label: '备料',
                                                            value: '备料'
                                                        },
                                                        {
                                                            label: '计量',
                                                            value: '计量'
                                                        },
                                                        {
                                                            label: '下料',
                                                            value: '下料'
                                                        },
                                                        {
                                                            label: '水泥磨',
                                                            value: '水泥磨'
                                                        },
                                                        {
                                                            label: '结果',
                                                            value: '结果'
                                                        },
                                                        {
                                                            label: '其他因素甲方',
                                                            value: '其他因素甲方'
                                                        },
                                                        {
                                                            label: '其他因素我方',
                                                            value: '其他因素我方'
                                                        }
                                                    ]"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item
                        label="可能原因"
                        :rules="[
                                                    { required: false, message: '请输入可能原因！', trigger: 'blur' }
                                                ]"
                        :name="['faqDeliveryFlowFormList', index, 'flowReason']"
                      >
                        <a-textarea
                          style="width: 100%"
                          v-model:value="
                                                        state.createList.faqDeliveryFlowFormList[index].flowReason
                                                    "
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="序号" :rules="[{ required: false, message: '请输入序号！', trigger: 'blur' }]" :name="['faqDeliveryFlowFormList', index, 'flowNo']">
                        <a-input
                          style="width: 100%"
                          v-model:value="
                                                        state.createList.faqDeliveryFlowFormList[index].flowNo
                                                    "
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item
                        label="解决方案"
                        :rules="[
                                                    { required: false, message: '请输入解决方案！', trigger: 'blur' }
                                                ]"
                        :name="['faqDeliveryFlowFormList', index, 'flowSolution']"
                      >
                        <a-textarea
                          style="width: 100%"
                          v-model:value="
                                                        state.createList.faqDeliveryFlowFormList[index].flowSolution
                                                    "
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item
                        label="主责方"
                        :rules="[
                                                    { required: false, message: '请输入主责方！', trigger: 'blur' }
                                                ]"
                        :name="['faqDeliveryFlowFormList', index, 'flowResponsibleParty']"
                      >
                        <a-input
                          style="width: 100%"
                          v-model:value="
                                                        state.createList.faqDeliveryFlowFormList[index]
                                                            .flowResponsibleParty
                                                    "
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item
                        label="主责部门"
                        :rules="[
                                                    { required: false, message: '请输入主责部门！', trigger: 'blur' }
                                                ]"
                        :name="['faqDeliveryFlowFormList', index, 'flowResponsibleDepartment']"
                      >
                        <a-input
                          style="width: 100%"
                          v-model:value="
                                                        state.createList.faqDeliveryFlowFormList[index]
                                                            .flowResponsibleDepartment
                                                    "
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item
                        label="典型案例"
                        :rules="[
                                                    { required: false, message: '请输入典型案例！', trigger: 'blur' }
                                                ]"
                        :name="['faqDeliveryFlowFormList', index, 'flowClassicCase']"
                      >
                        <a-input
                          style="width: 100%"
                          v-model:value="
                                                        state.createList.faqDeliveryFlowFormList[index].flowClassicCase
                                                    "
                        />
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>

                <a class="del" @click="handlerDeleteFormItem2(index)">删除</a>
                <a class="add-btn" @click="handlerAddFormItem2(index, '下方')">下方插入</a>
              </div>
            </div>
            <a-space>
              <a-button type="primary" ghost @click="handlerAddFormItem2(index, '最后')"
                ><template #icon><plus-outlined /></template>新增</a-button
              >
            </a-space>
          </a-form>
        </div>
      </a-modal>
      <!--           新增-->
      <!--          新建关键点-->
      <a-modal
        v-model:visible="state.visible1"
        :title="state.modalTitle1"
        width="1200px"
        destroy-on-close
        centered
        :body-style="{
                    paddingBottom: 0
                }"
        @ok="handlerConfirm1"
      >
        <div class="one-form">
          <a-form :model="state.keyPointForm" ref="batchForm">
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="第1步 备料">
                  <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.stockOne" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="">
                  <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.stockTwo" />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="第2步 计量">
                  <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.metering" />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="第3步 下料">
                  <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.cutting" />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="第4步 水泥磨">
                  <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.cementMill" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="第5步 结果">
                  <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.resultOne" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="">
                  <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.resultTwo" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="人为因素">
                  <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.humanFactorOne" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="">
                  <a-textarea placeholder="请输入" v-model:value="state.keyPointForm.humanFactorTwo" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-modal>
      <!--          新建关键点-->
      <div class="kb-page">
        <a-tabs v-model:activeKey="activeKey" size="large" :tabBarGutter="24" @change="tabChange">
          <a-tab-pane key="FAQ" tab="FAQ" />
          <a-tab-pane key="水泥配料主要流程与要点" tab="水泥配料主要流程与要点" />
          <a-tab-pane key="水泥配料项目交付端" tab="水泥配料项目交付端" />
        </a-tabs>
        <div v-if="activeKey === 'FAQ'">
          <FaqItem />
        </div>
        <div class="template-title" v-if="activeKey === '水泥配料主要流程与要点'">
          <div><span class="title-font">FAQ列表</span></div>
          <div style="position: relative; top: -8px">
            <!-- end vid_hwx83rvzpu 我的 -->
            <!-- begin vid_eaymhbrupq 审批 -->
            <a-space>
              <a-button class="vid_eaymhbrupq" :type="'primary'" @click="handleAddKeyPoints">
                <template #icon><PlusOutlined /></template>

                新增一行关键点
              </a-button>
              <a-button type="primary" v-if="!state.isEditTable" @click="handleEditStart" ghost>编辑</a-button>

              <a-button type="primary" v-else @click="state.isEditTable = false" ghost>完成</a-button>
            </a-space>
          </div>
        </div>
        <div class="template-title" v-if="activeKey == '水泥配料项目交付端'">
          <div><span class="title-font">FAQ列表</span></div>
          <div style="position: relative; top: -8px">
            <!-- end vid_hwx83rvzpu 我的 -->
            <!-- begin vid_eaymhbrupq 审批 -->
            <a-space>
              <a-button type="primary" @click="handleCreateClassFy"> 问题归类维护</a-button>
              <a-button class="vid_eaymhbrupq" :type="'primary'" @click="handleCreateQuestion">
                <template #icon><PlusOutlined /></template>

                新增
              </a-button>
            </a-space>
          </div>
        </div>
        <div class="default-table" v-if="activeKey == '水泥配料主要流程与要点'">
          <a-table
            :columns="columns1"
            :data-source="state.dataSource"
            bordered
            @resizeColumn="handleTaskResizeColumn"
            :scroll="{ y: 620 }"
            :pagination="false"
            :row-class-name="
                            (_record, index) => (index % 2 === 1 ? 'table-striped-even' : 'table-striped-odd')
                        "
          >
            <template #bodyCell="{ record, text, column }">
              <template v-if="column.dataIndex == 'step'">
                <div style="text-align: center" class="midllle" @dblclick="changeTable(record)">{{
                                    text
                }}</div>
              </template>
              <template v-if="['主导方', '主导部门'].includes(record.step) && column.dataIndex !== 'step'">
                <div class="littel-div" @dblclick="changeTable(record)">
                  {{ text }}
                </div>
              </template>
              <template v-if="column.dataIndex !== 'step' && !['主导方', '主导部门'].includes(record.step)">
                <div class="formatted-text" @dblclick="changeTable(record)">
                  <a-tooltip
                    :overlay-style="{
                                            maxWidth: '300px'
                                        }"
                  >
                    <template #title>
                      <p v-for="(item, index) in handlerGetSpace(text)" :key="index" style="margin: 0">{{ item }}</p></template
                    >
                    <span>
                      {{ text }}
                    </span>
                  </a-tooltip>
                </div>
              </template>
            </template>
          </a-table>
        </div>
        <div class="two-table" v-if="activeKey == '水泥配料项目交付端'">
          <a-table
            :columns="columns2"
            :data-source="state.dataSource2"
            bordered
            :scroll="{ y: 630 }"
            :pagination="false"
            @resizeColumn="handleTaskResizeColumn"
            :row-class-name="
                            (_record, index) => (index % 2 === 1 ? 'table-striped-even' : 'table-striped-odd')
                        "
          >
            <template #bodyCell="{ record, text, column }">
              <template v-if="column.dataIndex == 'opration'">
                <a-space>
                  <a-button type="link" @click="handleEdit(record)">编辑</a-button>
                  <a-popconfirm title="确定要删除吗？" @confirm="handleDelete(record)">
                    <a-button size="small" type="link">删除</a-button>
                  </a-popconfirm>
                </a-space>
              </template>
            </template>
          </a-table>
        </div>
      </div>
      <a-modal :visible="praiseVisible" @cancel="praiseVisible = false" width="300px" centered title="点赞" @ok="confirmPraise"> 是否确认为该条FAQ点赞？ </a-modal>
      <!-- end vid_jk7ozw00gq 自定义模板_r3pn8c4vso -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
  import {
      h, ref, reactive, toRaw, markRaw, watch, computed,
      onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
    } from "vue";
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission, getComponentParamsValue } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue'
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate, parseSubFromDataList } from '@/utils/format';
    import colorTheme from '@/design/custom-theme.json';
    
    import UserTableRecords from '@/model/UserTableRecords';
    import { getAppBaseUrl } from '@/utils/index';
    import { sendToken } from "@/hooks/useIframeToken";
    import { useSystemStore } from "@/store/modules/system";
    const systemStore = useSystemStore();
    



      // 获取传入的流程ID和组件参数
      const props = defineProps({
            'processInstanceId': {
            type: [String,Number,Boolean],
            default: undefined,
        },
      })
      const immediateWatch = (source, callback) => {
        watch(source, callback, {deep: true,immediate: true })
      }



  /* -------------------------- 属性定义 -------------------------- */

      const setTimeOutList = [];
      const pageLoading = reactive({
        loading: false,
        tip: undefined
      });
      const authInfo = localGet('app-user-store');




      // 处理校验
      const setSubFormName =(parentInfo, name)=>{
        return [parentInfo.parents, parentInfo.cycleIndex, name];
      }


  /* ========================== 属性定义 ========================== */


  /* -------------------------- 元素数据引用 -------------------------- */


  /* ========================== 元素数据引用 ========================== */


  /* -------------------------- 页面数据 -------------------------- */

    // 页面数据 faq检索-55家
    const dataConnector_conn_w662rqmpgg_response = ref();
    const dataConnector_conn_w662rqmpgg = async (additionParams = {}) => {
        const exec = async () => {
          // 获取参数
          const params = {
            pageNo: vid_udgmsu3n4q_props?.rt_tableConfig.pagination.current,
          taskSerialNumber: vid_ejyoc6z715_props?.value,
          pageSize: null,
          stageSerialNumber: vid_vngjh5r9s3_props?.value,
          templateCode: '11012'
          };

          // 注入附加的参数
          try {
            merge(params, additionParams);
          } catch (error) {
            console.log(error)
          }

          // 判断加载提示

          // 处理URL
          let url = '/solution-ppm/api/v2/built-in-system-ppm/task/faq/search';
          // 替换url中的变量

          // 排除空参数  日期组件重置后的空参数是[null] 或者[undefined]
          Object.keys(params).forEach(key=>{ if(params[key] === null){ delete params[key] }else if( Object.prototype.toString.call(params[key]) === '[object Object]' ){ Object.keys(params[key]).forEach(childKey=>{ if(params[key][childKey] === null || (Array.isArray(params[key][childKey]) && params[key][childKey].length === 1 && isNullOrUnDef(params[key][childKey]?.[0]))){ delete params[key][childKey] }}) } });
          return post(url, params, {
                headers: {}
              }).then(async (resp) => {
            dataConnector_conn_w662rqmpgg_response.value = resp;

            return resp;
          }).catch(async (e) => {


            return Promise.reject(e);
          }).finally(async () => {


          })
        }

          return await exec()

    }


    // 页面数据 faq数目统计-55家
    const dataConnector_conn_u7hg9f4f61_response = ref();
    const dataConnector_conn_u7hg9f4f61 = async (additionParams = {}) => {
        const exec = async () => {
          // 获取参数
          const params = {
            pageNo: null,
          taskSerialNumber: vid_ejyoc6z715_props?.value,
          pageSize: null,
          stageSerialNumber: vid_vngjh5r9s3_props?.value,
          templateCode: '11012'
          };

          // 注入附加的参数
          try {
            merge(params, additionParams);
          } catch (error) {
            console.log(error)
          }

          // 判断加载提示

          // 处理URL
          let url = '/solution-ppm/api/v2/built-in-system-ppm/task/faq/count';
          // 替换url中的变量

          // 排除空参数  日期组件重置后的空参数是[null] 或者[undefined]
          Object.keys(params).forEach(key=>{ if(params[key] === null){ delete params[key] }else if( Object.prototype.toString.call(params[key]) === '[object Object]' ){ Object.keys(params[key]).forEach(childKey=>{ if(params[key][childKey] === null || (Array.isArray(params[key][childKey]) && params[key][childKey].length === 1 && isNullOrUnDef(params[key][childKey]?.[0]))){ delete params[key][childKey] }}) } });
          return post(url, params, {
                headers: {}
              }).then(async (resp) => {
            dataConnector_conn_u7hg9f4f61_response.value = resp;

            return resp;
          }).catch(async (e) => {


            return Promise.reject(e);
          }).finally(async () => {


          })
        }

          return await exec()

    }


  /* ========================== 页面数据 ========================== */



  /* -------------------------- 响应 -------------------------- */

  /* ========================== 响应 ========================== */


  /* -------------------------- 函数 -------------------------- */

  /* ========================== 函数 ========================== */


  /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
    })

  /* ========================== 页面参数 ========================== */


  /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================


  /* ========================== 组件事件处理方法 ========================== */


  /* -------------------------- 生命周期 -------------------------- */
  // 用于参数变更后重新执行自定义指令
      const queryUpdateFlag = ref(0);
      onMounted(() => { ;dataConnector_conn_w662rqmpgg()
  dataConnector_conn_u7hg9f4f61()

    });

    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });

  /* ========================== 生命周期 ========================== */


  /* -------------------------- 数据关联处理 -------------------------- */





  /* -------------------------- 表单数据同步 -------------------------- */
  /* ========================== 表单数据同步 ========================== */

  /* ========================== 数据关联处理 ========================== */


  /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

  /* ========================== 不同组件自定义的处理逻辑 ========================== */


  // ================================定制化逻辑========================================
  const activeKey = ref('FAQ')
      onMounted(() => {
          getData()
          getClassFy()
          getData2()
          getTaskList()
      })
      const state = reactive({
          visible1: false,
          modalTitle1: '',
          dataSource: [],
          dataSource2: [],
          keyPointForm: {
              id: undefined,
              'stockOne': undefined,
              'stockTwo': undefined,
              'metering': undefined,
              'cutting': undefined,
              'cementMill': undefined,
              'resultOne': undefined,
              'resultTwo': undefined,
              'humanFactorOne': undefined,
              'humanFactorTwo': ''
          },
          isEditTable: false,
          questionList: [],
          createList: {
              problemClassifyId: undefined,
              problemHappensName: undefined,
              problemHappensStage: undefined,
              problemHappensNo: undefined,
              faqDeliveryFlowFormList: [],
              problemHappensStageList: []
          },
          classifyVisible: false,
          createVisible: false,
          createTitle: ''
      })
      const classificationItem = {
          problemClassifyName: undefined,
          problemClassifyNo: undefined
      }
      const createItem = {
          'id': undefined,
          'flowLabel': undefined,
          'flowReason': undefined,
          'flowNo': undefined,
          'flowSolution': undefined,
          'flowResponsibleParty': undefined,
          'flowResponsibleDepartment': undefined,
          'flowClassicCase': undefined,
          'problemHappensNo': undefined
      }

      //删除一个模块
      function handlerDeleteFormItem2(index) {
          if (state.createList.faqDeliveryFlowFormList.length == 1) {
              return
          }
          state.createList.faqDeliveryFlowFormList.splice(index, 1)
      }

      // 新插一条模块
      function handlerAddFormItem2(index, type) {
          if (type === '最后') {
              state.createList.faqDeliveryFlowFormList.push({ ...createItem })
          } else {
              // 否则使用 splice 方法在 index 后插入
              state.createList.faqDeliveryFlowFormList.splice(index + 1, 0, { ...createItem })
          }
      }

      //删除一个模块
      function handlerDeleteFormItem1(index) {
          if (state.questionList.length == 1) {
              return
          }
          state.questionList.splice(index, 1)
      }

      // 新插一条模块
      function handlerAddFormItem1(index, type) {
          if (type === '最后') {
              state.questionList.push({ ...classificationItem })
          } else {
              // 否则使用 splice 方法在 index 后插入
              state.questionList.splice(index + 1, 0, { ...classificationItem })
          }
      }

      const columns1 = ref([
          {
              title: '步骤',
              dataIndex: 'step',

              align: 'center',
              resizable: true,
              width: 120,
              customCell: item => {
                  const { rowIndex, rowSpan } = item
                  return {
                      rowSpan: rowSpan,
                      style: { borderRightColor: '#98B7FC' }
                  }
              }
          },
          {
              title: '工艺因素',
              dataIndex: 'taskName',

              resizable: true,
              align: 'center',
              width: 150,
              children: [
                  {
                      title: '第1步 备料',
                      dataIndex: '',

                      resizable: true,
                      width: 150,
                      align: 'center',
                      children: [
                          {
                              title: '',
                              dataIndex: 'stockOne',

                              resizable: true,
                              width: 150,
                              align: 'center'
                          },
                          {
                              title: '',
                              dataIndex: 'stockTwo',

                              resizable: true,
                              width: 150,
                              align: 'center'
                          }
                      ]
                  },
                  {
                      title: '第2步 计量',
                      dataIndex: 'metering',

                      resizable: true,
                      align: 'center',
                      width: 150
                  },
                  {
                      title: '第3步 下料',
                      dataIndex: 'cutting',

                      resizable: true,
                      align: 'center',
                      width: 150
                  },
                  {
                      title: '第4步 水泥磨',
                      dataIndex: 'cementMill',

                      resizable: true,
                      align: 'center',
                      width: 150
                  },
                  {
                      title: '第5步 结果',
                      dataIndex: '',

                      resizable: true,
                      align: 'center',
                      width: 150,
                      children: [
                          {
                              title: '',
                              dataIndex: 'resultOne',

                              resizable: true,
                              width: 150,
                              align: 'center'
                          },
                          {
                              title: '',
                              dataIndex: 'resultTwo',

                              resizable: true,
                              width: 150,
                              align: 'center'
                          }
                      ]
                  }
              ]
          },
          {
              title: '人为因素',
              dataIndex: 'taskName',
              resizable: true,
              align: 'center',
              width: 150,
              children: [
                  {
                      title: '内容',
                      dataIndex: 'humanFactorOne',

                      resizable: true,
                      align: 'center',
                      width: 150
                  },
                  {
                      title: '内容',
                      dataIndex: 'humanFactorTwo',

                      resizable: true,
                      align: 'center',
                      width: 150
                  }
              ]
          }
      ])
      const columns2 = ref([
          {
              title: '问题归类',
              dataIndex: 'problemClassifyName',
              align: 'center',
              resizable: true,
              width: 180,
              customCell: item => {
                  const { aSpan } = item
                  return {
                      rowSpan: aSpan
                  }
              }
          },
          {
              title: '序号',
              dataIndex: 'problemHappensNo',
              align: 'center',
              resizable: true,
              width: 180,
              customCell: item => {
                  const { bSpan } = item
                  return {
                      rowSpan: bSpan
                  }
              }
          },
          {
              title: '出现问题',
              dataIndex: 'problemHappensName',
              align: 'center',
              resizable: true,
              width: 180,
              customCell: item => {
                  const { bSpan } = item
                  return {
                      rowSpan: bSpan
                  }
              }
          },
          {
              title: '项目阶段',
              dataIndex: 'problemHappensStage',

              align: 'center',
              resizable: true,
              width: 180,
              customCell: item => {
                  const { bSpan } = item
                  return {
                      rowSpan: bSpan
                  }
              }
          },
          {
              title: '原因编号',
              dataIndex: 'flowNo',
              align: 'center',
              resizable: true,
              width: 180
          },
          {
              title: '生产流程标签',
              dataIndex: 'flowLabel',

              align: 'center',
              resizable: true,
              width: 180
          },
          {
              title: '可能原因',
              dataIndex: 'flowReason',
              align: 'center',
              resizable: true,
              width: 180
          },
          {
              title: '解决方案',
              dataIndex: 'flowSolution',

              align: 'center',
              resizable: true,
              width: 180
          },
          {
              title: '主责方',
              dataIndex: 'flowResponsibleParty',

              align: 'center',
              resizable: true,
              width: 180
          },
          {
              title: '主责部门',
              dataIndex: 'flowResponsibleDepartment',

              align: 'center',
              resizable: true,
              width: 180
          },
          {
              title: '典型案例',
              dataIndex: 'flowClassicCase',
              align: 'center',
              resizable: true,
              width: 180
          },
          {
              title: '操作',
              dataIndex: 'opration',

              align: 'center',
              resizable: true,
              width: 180,
              fixed: 'right',
              customCell: item => {
                  const { bSpan } = item
                  return {
                      rowSpan: bSpan
                  }
              }
          }
      ])

      function tabChange() {
          if (activeKey.value == '水泥配料主要流程与要点') {
              getData()
          } else {
              getData2()
              getClassFy()
          }
      }

      function getData2() {
          get('/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/search').then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              // state.dataSource2 = data.data
              state.dataSource2 = groupData2(data.data)
              console.log(groupData2(data.data))
          })
      }

      const currentData = ref({})
      const faqRef = ref(null)

      function handleAddKeyPoints() {
          state.visible1 = true
          state.modalTitle1 = '新增一行关键点'
          state.keyPointForm = {
              id: undefined,
              'stockOne': undefined,
              'stockTwo': undefined,
              'metering': undefined,
              'cutting': undefined,
              'cementMill': undefined,
              'resultOne': undefined,
              'resultTwo': undefined,
              'humanFactorOne': undefined,
              'humanFactorTwo': ''
          }
      }

      function getData() {
          get('/solution-ppm/api/v2/built-in-system-ppm/flow_key_point').then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              state.dataSource = groupData(data.data)
          })
      }

      function changeTable(record) {
          if (!state.isEditTable) {
              return
          }
          currentData.value = record
          Object.assign(state.keyPointForm, record)
          state.modalTitle1 = `编辑当前${record.step}`
          state.visible1 = true
      }

      function handlerConfirm1() {
          if (currentData.value.id) {
              //   编辑保存
              put(`/solution-ppm/api/v2/built-in-system-ppm/flow_key_point`, state.keyPointForm).then(data => {
                  if (data.code === 200) {
                      message.success('修改成功')
                      state.visible1 = false
                      currentData.value = {}
                      resetForm1()
                      getData()
                  } else {
                      message.error(data.message)
                  }
              })
          } else {
              //   新建保存
              post('/solution-ppm/api/v2/built-in-system-ppm/flow_key_point', state.keyPointForm).then(data => {
                  if (data.code === 200) {
                      message.success('新建成功')
                      getData()
                      state.visible1 = false
                      resetForm1()
                      currentData.value = {}
                  } else {
                      message.error(data.message)
                  }
              })
          }
      }

      function resetForm1() {
          state.keyPointForm = {
              id: undefined,
              'stockOne': undefined,
              'stockTwo': undefined,
              'metering': undefined,
              'cutting': undefined,
              'cementMill': undefined,
              'resultOne': undefined,
              'resultTwo': undefined,
              'humanFactorOne': undefined,
              'humanFactorTwo': ''
          }
      }

      const questionRef = ref(null)
      const createRef = ref(null)

      function groupData(data) {
          let step = ''
          if (!data || !data.length) {
              return []
          }
          return data.map((item, index) => {
              if (step !== item.step) {
                  step = item.step
                  let rowSpan = 0
                  for (let i = 0; i < data.length; i++) {
                      if (i >= index) {
                          if (step === data[i].step) {
                              rowSpan += 1
                          } else {
                              break
                          }
                      }
                  }
                  item.rowSpan = rowSpan
                  item.border = index
              } else {
                  item.rowSpan = 0
              }
              item.rowIndex = index
              return item
          })
      }

      function handleTaskResizeColumn(w, col) {
          col.width = w
      }

      function handleEditStart() {
          state.isEditTable = true
      }

      function formatTableData(data) {
          let aSpan = 0
          let bSpan = 0
          let formattedData = []

          // 遍历数组，计算每个aId和bId的行合并情况
          data.forEach((item, index) => {
              // 如果当前是第一个元素或者aId与前一个元素不一样，开始新的aId合并组
              if (index === 0 || item.classifyId !== data[index - 1].classifyId) {
                  // 计算该aId的span值（有多少行相同aId）
                  aSpan = data.filter(d => d.classifyId === item.classifyId).length
                  item.aSpan = aSpan
              } else {
                  item.aSpan = 0 // 非第一行，设置为0以隐藏重复行
              }

              // 对于bId相同的情况，判断是否为同一aId组内的bId合并
              if (
                  index === 0 ||
                  item.happensId !== data[index - 1].happensId ||
                  item.classifyId !== data[index - 1].classifyId
              ) {
                  // 计算该bId的span值（有多少行相同bId）
                  bSpan = data.filter(d => d.classifyId === item.classifyId && d.happensId === item.happensId).length
                  item.bSpan = bSpan
              } else {
                  item.bSpan = 0 // 非第一行，设置为0以隐藏重复行
              }

              formattedData.push(item)
          })

          return formattedData
      }

      function groupData2(data) {
          let currentClassifyId = ''
          let currenrHappensId = ''

          return data.map((item, index) => {
              if (currentClassifyId !== item.classifyId) {
                  currentClassifyId = item.classifyId
                  item.aSpan = calculateSpan(data, index, 'classifyId', currentClassifyId)
              } else {
                  item.aSpan = 0
              }

              if (currenrHappensId !== item.happensId) {
                  currenrHappensId = item.happensId
                  item.bSpan = calculateSpan(data, index, 'happensId', currenrHappensId)
              } else {
                  item.bSpan = 0
              }

              return item
          })
      }

      function calculateSpan(data, index, property, value) {
          let span = 0
          for (let i = index; i < data.length; i++) {
              if (data[i][property] === value) {
                  span += 1
              } else {
                  break
              }
          }
          return span
      }

      function handleCreateClassFy() {
          if (state.questionList.length == 0) {
              state.questionList.push({ ...classificationItem })
          }
          state.classifyVisible = true
      }

      function cancalClassFy() {
          state.classifyVisible = false
      }

      function confirmClassFy() {
          createRef.value.validate().then(() => {
              put('/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/classify/modify', state.questionList).then(
                  data => {
                      if (data.code !== 200) {
                          message.error(data.message)
                          return
                      }
                      message.success(data.message)
                      getData2()
                      getClassFy()
                      state.classifyVisible = false
                  }
              )
          })
      }

      function handleCreateQuestion() {
          resetAllForm()
          state.createVisible = true
          if (state.createList.faqDeliveryFlowFormList.length == 0) {
              state.createList.faqDeliveryFlowFormList.push({ ...createItem })
          }
          state.createTitle = '新建'
      }

      function cancalQuestion() {
          state.createVisible = false
          resetAllForm()
      }

      const twoState = reactive({
          ClassFyList: []
      })

      function confirmQuestion() {
          questionRef.value.validate().then(() => {
              if (currentQuestion.value.happensId) {
                  put('/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/happens/modify', state.createList).then(
                      data => {
                          if (data.code !== 200) {
                              message.error(data.message)
                              return
                          }
                          message.success(data.message)
                          state.createVisible = false
                          getData2()
                          currentQuestion.value = {}
                          resetAllForm()
                      }
                  )
              } else {
                  post('/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/happens/create', state.createList).then(
                      data => {
                          if (data.code !== 200) {
                              message.error(data.message)
                              return
                          }
                          message.success(data.message)
                          state.createVisible = false
                          getData2()
                          resetAllForm()
                          currentQuestion.value = {}
                      }
                  )
              }
          })
      }

      function getClassFy() {
          get('/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/classify/search').then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              twoState.classFyList = data.data.map(item => {
                  return {
                      label: item.problemClassifyName,
                      value: item.problemClassifyNo
                  }
              })
              state.questionList = data.data
          })
      }

      function handleEdit(record) {
          resetAllForm()
          get(`/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/happens/${record.happensId}`).then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              state.createList = data.data
              state.createList.faqDeliveryFlowFormList = data.data.faqDeliveryFlowDtoList
              getClassFy()
              state.createVisible = true
              currentQuestion.value = record
              state.createTitle = '编辑'
          })
      }

      const currentQuestion = ref({})

      function handleDelete(record) {
          del(`/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/happens/${record.happensId}`).then(data => {
              if (data.code !== 200) {
                  message.error(data.message)
                  return
              }
              message.success(data.message)
              getData2()
          })
      }

      function resetAllForm() {
          state.createList = {
              problemClassifyId: undefined,
              problemHappensName: undefined,
              problemHappensStage: undefined,
              problemHappensNo: undefined,
              faqDeliveryFlowFormList: [],
              problemHappensStageList: []
          }
          currentQuestion.value = {}
      }

      const taskList = ref([])

      function getTaskList() {
          get('/solution-ppm/api/v2/built-in-system-ppm/task/faq/v2/project_stage').then(data => {
              // if (data.code !== 200) {
              console.log('taskList', data)
              taskList.value = data.data.map(item => {
                  return {
                      label: item.stageName,
                      value: item.stageName
                  }
              })
              // }
          })
      }
      function handlerGetSpace(data) {
          return data ? data.split(/[,，;；\n]/).map(item => item.trim()) : []
      }
      // const FaqRef = ref(null)
      import FaqItem from './Page3000001016.vue'
</script>
<style lang="less" scoped>
  .page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
  .page_root :deep(.@{ant-prefix}-spin-nested-loading),
  .page_root :deep(.@{ant-prefix}-spin-container)
   {
      height: 100%;
  }
  .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
   {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
  }
  .page_root :deep(.@{ant-prefix}-table)
   {
    flex: auto;
    overflow: auto;
  }
  .table-moreBtn_down {
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
  }

  .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
  }

  /*  表格树结构样式处理，展开按钮层级增加*/
  :deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
  }
  /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
  :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
  }
  :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
  }
  :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
  }
  :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
  }

  /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
  :deep(.@{ant-prefix}-transfer-list)
   {
      height: 100%;
      width: 50%;
  }


  .search-div {
          background-color: #fff;
          margin-bottom: 16px;
          height: 72px;
          padding: 0 20px;
          border-radius: 6px;
      }

      .default-table:deep(.@{ant-prefix}-table-thead) > tr > th {
          background-color: #3875ff;
          color: #fff;
          font-weight: 600;
          padding: 0 16px;
          border-right: 1px solid #d9d9d9;
      }

      .default-table:deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          padding: 8px 8px;
          border-bottom: 1px solid #d9d9d9;
          word-break: break-all;
      }

      .two-table :deep(.@{ant-prefix}-table-thead) > tr > th {
          background-color: #3875ff;
          color: #fff;
          font-weight: 600;
          padding: 8px 16px;
          border-right: 1px solid #d9d9d9;
      }

      .two-table :deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          padding: 8px 8px;
          border-bottom: 1px solid #d9d9d9;
          word-break: break-all;
      }

      .kb-page {
          padding: 0 20px 20px 20px;
          height: 100%;
          position: relative;
          background-color: #fff;
          border-radius: 6px;
      }

      .template-title {
          margin-top: 10px;
          padding-left: 8px;
          font-size: 16px;
          height: 16px;
          line-height: 16px;
          border-left: 4px solid #3875ff;
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
      }

      .title-font {
          font-weight: 600;
      }

      .vid_hwx83rvzpu {
          margin-right: 16px;
      }

      .faq-title {
          display: flex;
          width: 100%;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          color: #262626;
          font-weight: 600;
          margin-bottom: 12px;
      }

      .my-page :deep(.ant3-form-item-label) {
          width: 115px;
      }

      .faq-item {
          border: 1px solid #3875ff;
      }

      .faq-item:nth-last-child(-n + 2) {
          border-top: none;
      }

      .sop-img,
      .question-img,
      .reson-img {
          height: 14px;
          width: 14px;
          background-size: cover;
          margin-top: 6px;
          margin-right: 4px;
      }

      .line-box {
          border-top: 1px solid #9bbaff;
          margin-bottom: 10px;
      }

      .fullscreen-animation {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
          z-index: 1000; /* 确保在最上层 */
      }

      .fullscreen-animation img {
          width: 320px;
          height: 320px;
      }

      .page_root {
          width: 100%;
          height: 100%;
          overflow: hidden;
      }

      .body {
          background-color: #fff;
          height: 100%;
          padding: 24px;
          padding-top: 0;
      }

      .form-content {
          display: inline-block;
          width: calc(100% - 80px);
      }

      .del {
          width: 28px;
          color: #3875ff;
          position: absolute;
          right: 35px;
          top: 5px;
      }

      .module-item,
      .module-item-two {
          position: relative;
          width: calc(100% - 60px);
      }

      .add-btn {
          position: absolute;
          right: -35px;
          color: #3875ff;
          top: 5px;
      }

      .default-table:deep(.@{ant-prefix}-table-thead) > tr > th {
          background-color: #3875ff;
          color: #fff;
          font-weight: 600;
          padding: 0 16px;
          border-right: 1px solid #d9d9d9;
      }

      .default-table:deep(.@{ant-prefix}-table-tbody) tr > td {
          font-size: 14px;
          font-family: arial, helvetica, 'microsoft yahei';
          font-weight: 400;
          color: #262626;
          padding: 8px 8px;
          border-bottom: 1px solid #d9d9d9;
          word-break: break-all;
      }

      .inner-div :deep(.ant3-tabs-tab) {
          margin-left: 10px;
      }

      .inner-div :deep(.ant3-tabs-tab-btn) {
          text-align: center;
          width: 68px;
          height: 32px;

          line-height: 32px;
      }

      .inner-div :deep(.ant3-tabs-tab-active) {
          width: 68px;
          height: 32px;
          background: #f0f2f5;
          border-radius: 16px;
          color: #262626;
          line-height: 32px;
          top: 12px;
      }

      .outer :deep(.ant3-tabs-tab-active) {
          width: 68px;
          height: 32px;
          background: #f0f2f5;
          border-radius: 16px;
          color: #262626;
          line-height: 32px;
      }

      .outer :deep(.ant3-tabs-nav-wrap) {
          height: 56px;
      }

      .inner-div :deep(.ant3-tabs-ink-bar) {
          display: none !important;
      }

      .inner-div :deep(.ant3-tabs-tab.ant3-tabs-tab-active .ant3-tabs-tab-btn) {
          color: #262626;
          font-weight: 700;
          background: #f0f2f5;
          border-radius: 16px;
      }

      .tab-div :deep(.ant3-tabs-nav) {
          margin-bottom: 0;
      }

      .one-form :deep(.ant3-form-item-label) {
          width: 115px;
      }

      .one-form {
          height: 480px;
          overflow-y: auto;
          overflow-x: hidden;
      }

      .formatted-text {
          min-height: 20px;
          height: 150px;
          white-space: pre-wrap;
          word-wrap: break-word;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 7; /* 显示行数 */
          -webkit-box-orient: vertical;
      }

      .form-content {
          display: inline-block;
          width: calc(100% - 80px);
      }

      .bottom-item {
          border: 1px solid #d9d9d9;
          padding: 16px;
          margin-bottom: 16px;
      }

      .module-item-two {
          border-bottom: 1px solid #d9d9d9;
          margin-bottom: 16px;
      }

      .default-table :deep(.table-striped-odd) td {
          background-color: #ffffff;
      }

      .default-table :deep(.table-striped-even) td {
          background-color: #f8fafc;
      }

      .two-table :deep(.table-striped-odd) td {
          background-color: #ffffff;
      }

      .two-table :deep(.table-striped-even) td {
          background-color: #ffffff;
      }

      :deep(.ant3-table.ant3-table-bordered > .ant3-table-container) {
          border-color: #f8fafc;
      }

      .formatted-text {
          text-align: left;
      }

      .default-table :deep(.ant3-table-wrapper) {
          border-bottom: 1px solid #d9d9d9;
      }

      .midllle {
          line-height: 40px;
          height: 40;
      }

      .littel-div {
          height: 40px;
          line-height: 40px;
      }
</style>